<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Insert title here</title>
<script type="text/javascript" src="/resource/js/jquery-3.2.1/jquery.js"></script>
<script type="text/javascript" src="/resource/bootstrap-4.5.0-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="/resource/bootstrap-4.5.0-dist/css/bootstrap.css">
<style type="text/css">
/* 限制文章详情中图片的大小，最大宽度为400px */
 img {
	max-width:300px;
}

</style>
</head>
<body>
	<div class="container">
		<form action="/admin/users" method="post">	
			用户名：<input type="text" name="username" value="${user.username }">
			用户状态：						
			<input type="radio" name="locked" value="0" ${user.locked==0?'checked':'' }>正常
			<input type="radio" name="locked" value="1" ${user.locked==1?'checked':'' }>锁定
			<input type="radio" name="locked" value="2" ${user.locked==null || user.locked==2?'checked':'' }>全部
			<input type="button" onclick="query()" value="查询">
		</form>	
			<table class="table">
				<tr>
					<td>序号</td>
					<td>用户名</td>
					<td>性别</td>
					<td>出生日期</td>
					<td>注册日期</td>
					<td>是否锁定</td>	
				</tr>
			
			
				<c:forEach items="${info.list}" var="u" varStatus="i">
					<tr>
						<td>${i.count}</td>
						<td>${u.username}</td>
						<td>${u.gender==0?'女':'男'}</td>						
						<td>
							<fmt:formatDate value="${u.birthday}" pattern="yyyy-MM-dd"/>
						</td>
						<td>
							<fmt:formatDate value="${u.created}" pattern="yyyy-MM-dd"/>
						</td>
						<td>
							<c:if test="${u.locked==0}">
								<input type="button" class="btn btn-success" value="正常" onclick="updateLocked(${u.id},this)">
							
							</c:if> 
							<c:if test="${u.locked==1}">
								<input type="button" class="btn btn-danger" value="锁定" onclick="updateLocked(${u.id},this)">
							
							</c:if>
						</td>
					</tr>
				</c:forEach>
			</table>
		<!-- 加载分页页面 -->
		<jsp:include page="/WEB-INF/view/commons/pages.jsp"></jsp:include>		
	</div>	

</body>
<script type="text/javascript">
	//分页
	function goPage(pageNum){
		//location="/admin/users?pageNum="+pageNum+"&"+$("form").serialize();
		$("#center").load("/admin/users?pageNum="+pageNum+"&"+$("form").serialize());
	}

	//查询用户数据
	function query(){
		$("#center").load("/admin/users?"+$("form").serialize());
	}
	
	//修改锁定状态
	function updateLocked(id,obj){
		
		//获取按钮显示的文字
		var locked=$(obj).val()=="锁定"?0:1;
		//使用ajax修改
		$.post("/admin/updateLocked",{id:id,locked:locked},function(result){
			if(result){
				//修改按钮样式文字
				if($(obj).val()=="锁定"){
					$(obj).val("正常");
					$(obj).removeClass("btn-danger");
					$(obj).addClass("btn-success");	
											
				}else{
					$(obj).val("锁定");
					$(obj).removeClass("btn-success");
					$(obj).addClass("btn-danger");				
				}
						
			}else{
				alert("修改失败");
			}
		})
		
	}
	
	
</script>
</html>